<template>
	<view>
		<!-- 头部 -->
		<yHeader :current='current' @Tabs="handleTabs"></yHeader>
		<!-- 内容 -->
		<view class="bg-grey py-4">
			<view class="__inner">
				<!-- 订单详情 -->
				<view class="p-2 px-4 bg-white">
					<el-button @click="Black" type="primary">返回上一页</el-button>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column align="center" label="商品信息">
							<template slot-scope="scope">
								<image :src="Domain_IMG + scope.row.Picture_URL" alt="商品图片" class="img" />
							</template>
						</el-table-column>
						<el-table-column align="center" label="所属企业">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Enterprise_Name" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Enterprise_Name}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Article_Name" label="商品名称">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Article_Name" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Article_Name}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Quantity" label="交易数量">
							<template v-slot="{row}">
								<text>{{row.Quantity}}{{row.Unit}}</text>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Trading_Name" label="付款方式">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Trading_Name" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Trading_Name}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Amount" label="应付金额">
							<template v-slot="{row}">
								<text>￥{{(Number(row.Amount) * Number(row.Quantity)).toFixed(2)}}</text>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Collection_Amount" label="实付金额">
							<template v-slot="{row}">
								<text>￥{{(Number(row.Collection_Amount)).toFixed(2)}}</text>
							</template>
						</el-table-column>
						<el-table-column align="center" label="待付金额">
							<template v-slot="{row}">
								<text>￥{{(Number(row.Amount) - Number(row.Collection_Amount)).toFixed(2)}}</text>
							</template>
						</el-table-column>
					</el-table>
					<el-table v-if="tableData1.length!=0" class="mt-2" :data="tableData1" border style="width: 100%">
						<el-table-column prop="Transport_Type" align="center" label="运输方式">
						</el-table-column>
						<el-table-column align="center" label="物流信息编号">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Group_Logistics_SerialNumber" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Group_Logistics_SerialNumber}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="Article_Name" label="物流信息">
							<template v-slot="{row}">
								<el-tooltip effect="dark" :content="row.Transport_Explain" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{row.Transport_Explain}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
				</view>
				<view class="p-4 bg-white mb-4 ">
					<view class="my-4 w-100 border border-grey" style="box-sizing: border-box;">
						<view class="flex bg-lightbrown" style="height: 80rpx;">
							<view class="flex flex-shrink justify-center align-center"
								style="width: 30%; height: 100%;">
								<text class="font">付款阶段</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%; height: 100%;">
								<text class="font">付款额度</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%; height: 100%;">
								<text class="font">付款金额</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%; height: 100%;">
								<text class="font">最晚付款时间</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%;height: 100%;">
								<text class="font">操作</text>
							</view>
						</view>
						<view class="flex align-center py-4" v-for="(item,i) in Data" :key="i">
							<view class="flex justify-center flex-shrink align-center"
								style="width: 30%;  height: 150rpx;">
								<text class="font">{{item.Trading_Detail_Name}}</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%;height: 100%;">
								<text class="font">{{item.Trading_Amount}}%</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%;height: 100%;">
								<text class="font" :class="'text-'+ThemeColors">￥{{item.Amount}}</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%;height: 100%;">
								<text class="font">{{item.Trading_Date}}天后</text>
							</view>
							<view class="flex justify-center align-center" style="width: 20%;height: 100%;">
								<el-button v-if="item.Row_Status=='0'" @click="ChoosePayway(item)"
									type="primary">选择付款方式</el-button>
								<el-button v-else type="danger">付款完成</el-button>
							</view>
						</view>
					</view>
				</view>
				<view class="bg-lightbrown border px-4" :class="'border-'+ThemeColors" style="box-sizing: border-box;">
					<view class="flex align-center justify-end w-100" style="height: 80rpx;">
						<text
							class="font-md">货品总金额：￥{{(Number(tableData[0].Amount) * Number(tableData[0].Quantity)).toFixed(2)}}</text>
					</view>
					<view class="flex align-center justify-end w-100" style="height: 80rpx;">
						<text class="font-md">运费金额：￥0.00</text>
					</view>
					<view class="flex align-end justify-end w-100" style="height: 120rpx;">
						<text class="font-lg">订单总价：<text class="h2"
								:class="'text-'+ThemeColors">￥{{(Number(tableData[0].Amount) * Number(tableData[0].Quantity)).toFixed(2)}}</text>元</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter></yFooter>
		<!-- 选择支付方式 -->
		<el-dialog title="选择支付方式" :visible.sync="dislogChoosePay">
			<el-radio-group @change="ChangeradioValue" class="w-100" v-model="radioValue">
				<view class="flex w-100" style="justify-content: space-evenly;">
					<view v-for="(item,i) in PayWay" :key="i" class="flex flex-column justify-center align-center">
						<el-radio :label="item.id">{{item.label}}</el-radio>
						<image style="width: 150rpx;height: 150rpx;" :src="item.src" mode="">
						</image>
					</view>
				</view>
			</el-radio-group>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dislogChoosePay = false">取 消</el-button>
				<el-button type="primary" @click="SurePayWay()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 付款二维码 -->
		<el-dialog title="支付二维码" :visible.sync="dislogPayCode">
			<view class="flex justify-center">
				<uqrcode ref="uqrcode" canvas-id="qrcode" :value="codeurl" :options="{ margin: 10 }">
				</uqrcode>
			</view>
			<view class="flex justify-center">
				<el-button type="danger" @click="back()">返回上一页</el-button>
				<el-button :loading="loading" type="primary" @click="CompletePayfor()">支付完成后点击此处</el-button>
			</view>
		</el-dialog>
		<!-- 电汇上传 -->
		<el-dialog title="电汇" :visible.sync="dislogPayTicket">
			<view class="flex justify-center w-100">
				<uni-file-picker :disabled="imgdisabled" v-model="img" @select="UpdateImg" limit="1"
					:title="title"></uni-file-picker>
			</view>
			<view class="flex justify-center">
				<el-button type="danger" @click="back()">返回上一页</el-button>
				<el-button :loading="loading" :disabled="Picture_URL==''" type="primary"
					@click="ElectronicRemittance()">确认上传</el-button>
			</view>
		</el-dialog>
	</view>
</template>

<script>
	import times from '@/static/js/utils.js'
	const app = getApp();
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	import {
		Message
	} from 'element-ui'
	import {
		TransactionPaystagesID,
		GroupWeChatNativeAction,
		GroupElectronicRemittance,
		ElectronicPIC
	} from '@/api/group.js'
	import {
		getAddAction,
		getSubtableInquiryOriginal,
		GoodsInquiryKeyOriginal,
		getEditAction,
		getInquiryIDOriginal
	} from '@/api/global.js'
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				title: '加载中...请稍后',
				loading: false,
				img: [],
				Data: [],
				formData: {},
				radioValue: 1,
				imgdisabled: true,
				Group_Paystages_SerialNumber: '',
				Group_Transaction_SerialNumber: '',
				Enterprise_Info_SerialNumber: "",
				Amount: '',
				Picture_URL: '',
				Collection_SerialNumber: "",
				dislogChoosePay: false,
				dislogPayCode: false,
				dislogPayTicket: false,
				codeurl: '',
				Domain_IMG: app.globalData.Domain_IMG,
				ThemeColors: app.globalData.ThemeColors,
				PaystagesData: {},
				current: -1,
				PayWay: [{
						id: 1,
						label: '微信支付',
						src: '../../static/icon/WXlogo.png'
					},
					{
						id: 2,
						label: '支付宝支付',
						src: '../../static/icon/zfb.png'
					},
					{
						id: 3,
						label: '电汇',
						src: '../../static/icon/dzhz.png'
					},
				],
				tableData: [],
				tableData1:[],
				Time: null
			}
		},
		onLoad(options) {
			if (options.type == 'supply') {
				this.current == 2
			} else if (options.type == 'purchase') {
				this.current == 3
			}
			this.Enterprise_Info_SerialNumber = options.Enterprise_Info_SerialNumber
			this.Group_Transaction_SerialNumber = options.Group_Transaction_SerialNumber
			this.getDetail({
				Group_Transaction_SerialNumber: options.Group_Transaction_SerialNumber
			})
			this.tableData.push(JSON.parse(uni.getStorageSync('detail')))
			console.log(this.tableData)
			this.getLogistics()
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url
				})
			},
			Black() {
				uni.navigateBack()
			},
			async getDetail(data) {
				const res = await TransactionPaystagesID({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					this.Data = res.Data
					this.Data.forEach(item => {
						item.disabled = true
					})
					this.Data[0].disabled = false
					console.log(this.Data);
				}
			},
			ChoosePayway(item) {
				console.log(item)
				this.dislogChoosePay = true
				this.Group_Paystages_SerialNumber = item.Group_Paystages_SerialNumber
				this.Amount = item.Amount
			},
			ChangeradioValue(e) {
				console.log(this.radioValue)
			},
			async CodeUrl(data) {
				this.dislogPayCode = true
				const res = await GroupWeChatNativeAction({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else {
					console.log(res)
					if (res.code_url) {
						this.codeurl = res.code_url
						this.Time = setInterval(() => {
							let Data = {
								Data: 'collection',
								Primary_Key_Name: 'Collection_SerialNumber',
								Primary_Key: res.Data,
								isNullEnterprise: true
							}
							this.getPayNotice(Data)
						}, 1000)
						return
					}
					if (res.Data) {
						this.Collection_SerialNumber = res.Data
						this.title = '请上传一张电汇发票'
						this.imgdisabled = false
					}
				}
			},
			async getLogistics() {
				const res = await getInquiryIDOriginal({
					data: {
						Data: 'group_transaction_logistics',
						Primary_Key_Name: 'Group_Transaction_SerialNumber',
						Primary_Key: this.Group_Transaction_SerialNumber,
						isNullEnterprise: true
					}
				})
				console.log(res)
				this.tableData1 = res
			},
			async getPayNotice(data) {
				const res = await getInquiryIDOriginal({
					data
				})
				console.log(res)
				if (res[0].Row_Status == '1') {
					clearInterval(this.Time)
					this.Time = null
					Message({
						type: 'success',
						message: '已付款'
					})
					this.CompletePayfor()
				}
			},
			SurePayWay() {
				if (this.radioValue == 1) {
					// 微信支付
					if (this.codeurl == '') {
						let data = {
							Data: this.Group_Paystages_SerialNumber,
							Order_Type: '3',
							Collection_Type: '微信支付'
						}
						this.CodeUrl(data)
					} else {
						this.dislogPayCode = true
					}
				} else if (this.radioValue == 2) {
					//支付宝支付
				} else {
					//电汇支付
					let data = {
						Data: this.Group_Paystages_SerialNumber,
						Order_Type: '3',
						Collection_Type: '电子汇账'
					}
					this.dislogPayTicket = true
					this.CodeUrl(data)
				}
				this.dislogChoosePay = false
			},
			async ElectronicRemittance() {
				this.loading = true
				let data = {
					Picture_URL: this.Picture_URL,
					Collection_SerialNumber: this.Collection_SerialNumber,
					Purchase_Amount: this.Amount,
				}
				const res = await GroupElectronicRemittance({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else {
					console.log(res)
					this.loading = false
					Message({
						message: '提交成功！',
						type: 'success'
					})
					this.getDetail({
						Group_Transaction_SerialNumber: this.Group_Transaction_SerialNumber
					})
					this.dislogPayTicket = false
					this.dislogPayCode = false
					this.dislogChoosePay = false
				}
			},
			async CompletePayfor() {
				this.loading = true
				let obj = {
					// 采购信息表
					group_transaction: {
						group_transaction_paystages: {}
					}
				}
				const res = await getSubtableInquiryOriginal({
					data: {
						Primary_Key: this.Group_Transaction_SerialNumber,
						JSONObject: JSON.stringify(obj),
						token: uni.getStorageSync('loginInfo').token,
					},
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
					this.formData = res.group_transaction[0]
					this.formData.Row_Status = '7'
					let group_message_buyer = {
						Group_Message_SerialNumber: "",
						Group_Transaction_SerialNumber: this.formData.Group_Transaction_SerialNumber,
						Cause: "对方已付款",
						Submission_Time: times.nowtime(),
						Enterprise_Info_SerialNumber: this.Enterprise_Info_SerialNumber,
						Seller_Type: "1"
					}
					let data = {
						Data: JSON.stringify({
							group_message: [group_message_buyer]
						}),
						token: uni.getStorageSync('loginInfo').token,
					}
					this.getAdd(data)
				}
			},
			async getAdd(data) {
				const res = await getAddAction({
					data,
				})
				this.loading = false
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
					this.getDetail({
						Group_Transaction_SerialNumber: this.Group_Transaction_SerialNumber
					})
					this.dislogPayTicket = false
					this.dislogPayCode = false
					this.dislogChoosePay = false
				}
			},
			UpdateImg(e) {
				console.log(e)
				let Picture_URL
				//图片转base64
				uni.request({
					url: e.tempFilePaths[0],
					method: 'GET',
					responseType: 'arraybuffer',
					success: ress => {
						Picture_URL = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64
						let data = {
							Data: 'data:image/jpeg;base64,' + Picture_URL,
							DataLength: e.tempFiles[0].size,
							FileName: e.tempFiles[0].name
						}
						this.CheckImg(data)
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
			},
			async CheckImg(data) {
				const res = await ElectronicPIC({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
					this.Picture_URL = res.Picture_Url
				} else {
					Message({
						message: '不是一张有效的电汇凭证',
						type: 'error'
					})
				}
			},
			back() {
				this.dislogPayTicket = false
				this.dislogPayCode = false
				this.dislogChoosePay = true
			}
		}
	}
</script>

<style>
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	.img {
		width: 120rpx;
		height: 120rpx;
	}
</style>